<template id="login">
  <div>
    <div id="poster">
      <img :src="bgImg" width="100%" height="100%" alt="" />
    </div>
    <div class="loginForm">
      <el-form
        class="login-container"
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        label-position="left"
        label-width="0px"
      >
        <h3 class="login_title">登录</h3>
        <el-form-item prop="account">
          <el-input
            type="text"
            v-model="loginForm.account"
            auto-complete="off"
            placeholder="账号"
          ></el-input>
        </el-form-item>

        <el-form-item prop="userPassword">
          <el-input
            type="password"
            v-model="loginForm.userPassword"
            auto-complete="off"
            placeholder="密码"
          ></el-input>
        </el-form-item>

        <el-form-item style="width: 100%">
          <el-button
            type="primary"
            round
            style="width: 100%; border: none"
            @click="login('loginForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<!-- 调用   <mycom></mycom> -->
<script>
export default {
  name: "Login",
  data() {
    // 对用户名进行校验
    var validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    // 对密码进行校验
    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      bgImg: require("@/assets/img/bg2.png"),
      loginForm: {
        account: "",
        userPassword: "",
      },
      rules: {
        account: [{ validator: validateName, trigger: "blur" }],
        userPassword: [
          {
            validator: validatePassword,
            trigger: "blur",
          },
        ],
      },
      responseEntity: [],
    };
  },
  methods: {
    login(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          this.$axios.get(
              "/api/login?"+"userName="+this.loginForm.account+"&password="+this.loginForm.userPassword)
            .then((res) => {
              console.log(res.data);
              // alert(res.data.code === 200)
              if (res.data != null) {
                // localStorage.setItem("userdata", JSON.stringify(res.data.data));
                // localStorage.setItem("Authorization", res.data.msg);
                this.$store.commit("login", "true");
                this.$router.push({ path: "/system/RoleManagement" });
                if (res.data.data.roleId == 4) {
                  // localStorage.setItem("menulist", "");
                  
                } else {
                  // localStorage.setItem("menulist", JSON.stringify(menulist));
                  this.$router.push({ path: "/exam/examList" });
                }
              }else{
                this.$message({
                  type: "warn",
                  message: "密码输入错误",
                });
              }
            })
            .catch((failResponse) => {});
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
#poster {
  height: 100%;
  width: 100%;
  z-index: -1;
  position: absolute;
}
.loginForm {
  width: 100%;
  z-index: 1;
  position: absolute;
}
body {
  margin: 0px;
  padding: 0;
}

.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 100px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>
